<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no" />
    <title>Document</title>
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/iconfont.ttf" />
    <link rel="stylesheet" href="css/classify.css" />
  </head>
  <body>
    <!-- 大盒子 -->
    <div class="wrap">
      <header>
        <div class="header">
          <div class="button">
            <a href="./index.html"><button>Back</button></a>
          </div>
          <div class="classify">
            <h4>分类</h4>
          </div>
          <div class="city">
            <select name="" id="">
              <option value="">北京市</option>
              <option value="">上海市</option>
              <option value="">广州市</option>
              <option value="">深圳市</option>
            </select>
          </div>
        </div>
      </header>
      <main>
        <div class="hobbit">
          <img src="img/11.png" alt="" />
          <img src="img/12.png" alt="" />
          <img src="img/13.png" alt="" />
          <img src="img/14.png" alt="" />
        </div>
        <div class="neirong">
          <p>美食</p>
          <p>电影</p>
          <p>运动</p>
          <p>唱歌</p>
        </div>
        <div class="yuandian">
          <span class="iconfont icon-xiaoyuandian"></span>
          <span class="iconfont icon-xiaoyuandian"></span>
          <span class="iconfont icon-xiaoyuandian"></span>
          <span class="iconfont icon-xiaoyuandian"></span>
        </div>
        <div class="foods">
          <div class="ps1">
            <img src="img/15.png" alt="" />
          </div>
          <div class="font1">
            <h4>美食类</h4>
            <p>更多</p>
          </div>
        </div>
        <div class="sushi">
          <img src="img/16.png" alt="" />
          <img src="img/17.png" alt="" />
          <img src="img/18.png" alt="" />
          <img src="img/19.png" alt="" />
        </div>
        <div class="foods_two">
          <div class="ps1">
            <img src="img/20.png" alt="" />
          </div>
          <div class="font1">
            <h4>运动类</h4>
            <p>更多</p>
          </div>
        </div>
        <div class="sushi_two">
          <img src="img/21.png" alt="" />
          <img src="img/22.png" alt="" />
          <img src="img/23.png" alt="" />
          <img src="img/24.png" alt="" />
        </div>
        <div class="foods_three">
          <div class="ps1">
            <img src="img/25.png" alt="" />
          </div>
          <div class="font1">
            <h4>电影类</h4>
            <p>更多</p>
          </div>
        </div>
        <div class="sushi_three">
          <img src="img/26.png" alt="" />
          <img src="img/27.png" alt="" />
          <img src="img/26.png" alt="" />
          <img src="img/27.png" alt="" />
        </div>

        <div class="foods_four">
          <div class="ps1">
            <img src="img/25.png" alt="" />
          </div>
          <div class="font1">
            <h4>电影类</h4>
            <p>更多</p>
          </div>
        </div>
        <div class="sushi_four">
          <img src="img/26.png" alt="" />
          <img src="img/27.png" alt="" />
          <img src="img/26.png" alt="" />
          <img src="img/27.png" alt="" />
        </div>

        <div class="foods_five">
          <div class="ps1">
            <img src="img/25.png" alt="" />
          </div>
          <div class="font1">
            <h4>电影类</h4>
            <p>更多</p>
          </div>
        </div>
        <div class="sushi_five">
          <img src="img/26.png" alt="" />
          <img src="img/27.png" alt="" />
          <img src="img/26.png" alt="" />
          <img src="img/27.png" alt="" />
        </div>
      </main>
      <!-- 底部栏导航栏 -->
      <footer>
        <div class="list">
          <a href="./index.html">
            <div class="iconfont icon-index"></div>
            <p>首页</p>
          </a>
          <a href="./classify.html">
          <div class="iconfont icon-category"></div>
           <p>分类</p>
          <a href="./find.html">
            <div class="iconfont icon-faxian"></div>
            <p>发现</p>
          </a>
          <a href="#">
            <div class="iconfont icon-wode2"></div>
            <p>我的</p>
          </a>
        </div>
      </footer>
    </div>
  </body>
</html>
